<template>
	<div id="withdrawal">
		<p class="Title">账户明细</p>
		<!-----------资金明细------------>
		<div class="recharge_1">
			<img src="../../static/img/recharge-01.png"/>
			<div class="recharge_1_text">
				<p class="recharge_1_title">资金明细</p>
				<div class="recharge_1_content">
					<p>当前可用余额：<span>{{returnFloat(balance)}}元</span></p>
					<p>担保任务资金：<span>{{returnFloat(freeze)}}元</span></p>
					<!--<p>提现中：<span>{{returnFloat(putForward)}}元</span></p>-->
					<!--<p>推广获利：<span>{{returnFloat(spread)}}元</span></p>-->
				</div>
			</div>
		</div>
		<!-------账户充值/充值记录------------>
		<ul class="recharge_2">
			<!--<li @click="recharge_2 = 1" :class="recharge_2 == 1?'recharge_2_active':''">提现</li>
			<span>|</span>
			<li @click="recharge_2 = 3" :class="recharge_2 == 3?'recharge_2_active':''">提现列表</li>
			<span>|</span>-->
			<li @click="recharge_2 = 2" :class="recharge_2 == 2?'recharge_2_active':''">账户明细</li>
		</ul>
		<!-----------充值方式--------------->
		<div v-show="recharge_2 == 1" class="recharge_3">
			<!-------提现表单-------->
			<div class="withdrawal">
				<div class="withdrawal_item">
					<p>可提金额：</p>
					<p class="balance">{{balance}}元</p>
				</div>
				<div class="withdrawal_item">
					<p>提现到银行卡：</p>
					<el-select v-model="withdrawalForm.bankId" placeholder="请选择所属银行">
					    <el-option
					        v-for="item in cardList"
					        :key="item.id"
					        :label="item.cardNum"
					        :value="item.id">
					    </el-option>
					</el-select>
				</div>
				<div class="withdrawal_item">
					<p>提现金额：</p>
					<div class="money">
						<input type="number" v-model="withdrawalForm.money" />
						<span class="unit">元</span>
						<p class="cue">（手续费：{{withdrawalForm.money?(withdrawalForm.money>20?returnFloat(withdrawalForm.money*0.05):1):0}}元；实际到账：{{withdrawalForm.money?(withdrawalForm.money>20?returnFloat(withdrawalForm.money*0.95):(withdrawalForm.money-1)):0}}元）</p>
					</div>
				</div>
				<div class="withdrawal_item">
					<p>登录密码：</p>
					<input type="password" v-model="withdrawalForm.password" />
				</div>
				<input type="button" id="sub" value="提交申请" @click="bankSub"/>
			</div>
			<!--------温馨提示------------>
			<div class="warm_prompt">
				<div>
					<img src="../../static/img/recharge-05.png"/>
					<p>温馨提示：</p>
				</div>
				<ul>
					<li>1.使用银行卡提现需收取<span>5%</span>的手续费;</li>
					<li>2.提现金额需大于1元，手续费最低为1元;</li>
				</ul>
			</div>
		</div>
		<!---------提现列表-------------->
		<div v-show="recharge_2 == 3" class="recharge_4">
			<!---------筛选栏------------>
			<div class="search" id="search">
				<el-select v-model="dateType">
				    <el-option
				        v-for="item in timeList"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				    </el-option>
				</el-select>
			</div>
			<!--------记录列表--------->
			<div class="recharge_list">
				<div class="list_title">
					<p>所属银行</p>
					<p>银行卡尾号</p>
					<p>提现金额</p>
					<p>实际到账金额</p>
					<p>不通过理由</p>
					<p>状态</p>
					<p>提现时间</p>
				</div>
				<div v-if="withList.length>0" v-for="item in withList" class="list_item">
					<p>{{item.bankName}}</p>
					<p>{{item.bankNum.substring(item.bankNum.length-4)}}</p>
					<p>{{item.money}}</p>
					<p>{{item.realMoney}}</p>
					<p>{{(item.reason!=null && item.reason!="")?item.reason:"--"}}</p>
					<p>{{getStatus(item.status)}}</p>
					<p>{{getDate(item.createtime)}}</p>
				</div>
			</div>
			<el-pagination
				v-if="withList.length>0" 
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<!----------没有数据了------------>
			<div v-else class="noData">
				<img src="../../static/img/nodata.png"/>
			</div>
		</div>
		<!---------账户明细-------------->
		<div v-show="recharge_2 == 2" class="recharge_4">
			<!---------筛选栏------------>
			<div class="search">
				<el-select v-model="searchDateType">
				    <el-option
				        v-for="item in timeList"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				    </el-option>
				</el-select>
				<el-select v-model="searchType">
				    <el-option
				        v-for="item in typeList"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				    </el-option>
				</el-select>
				<input type="text" placeholder="输入活动名称/备注关键字" v-model="searchRemark" />
			    <input type="button" value="搜索" @click="search"/>
			</div>
			<!--------记录列表--------->
			<div class="recharge_list">
				<div class="list_title">
					<p>类型</p>
					<!--<p>充值交易号</p>-->
					<p>创建时间</p>
					<p>名称/备注</p>
					<p>金额</p>
					<!--<p>状态</p>-->
				</div>
				<div v-if="flowList.length>0" v-for="item in flowList" class="list_item">
					<p>{{item.typeName}}</p>
					<!--<p>{{getPayNum(item)}}</p>-->
					<p>{{getDate(item.createtime)}}</p>
					<p>{{item.remark}}</p>
					<p>{{returnFloat(item.money,item.type)}}</p>
					<!--<p>{{item.status}}</p>-->
				</div>
			</div>
			<el-pagination
				v-if="flowList.length>0" 
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<!----------没有数据了------------>
			<div v-else class="noData">
				<img src="../../static/img/nodata.png"/>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:'withdrawal',
	data:function(){
		return{
			total: 0,//总条数
			pageSize: 10,//每页条数
			currentPage: 1,//当前页码
			balance: '0',//余额
			freeze: '0',//冻结资金
			putForward: '0',//提现中
			spread: '0',//推广获利
			recharge_2: 2,//1提现/2账户明细/3提现列表
			withdrawalForm: {//提现表单
				bankId:'',//银行卡Id
				money: '',//提现金额
				password: '',//密码
			},
			searchDateType: '',//时间筛选值
			searchType: '',//交易类型
			searchRemark: '',//备注关键字 
			cardList:[//银行卡类别
				{
					cardNum: '1254789631254789631',//卡号
					id:'1',//卡id
				},
				{
					cardNum: '1254789631254789',//卡号
					id:'2',//卡id
					
				},
				{
					cardNum: '1254789631254789',//卡号
					id:'3',//卡id
				},
			],
			timeList:[//时间筛选列表
				{
					value: '',
					label: '全部'
				},
				{
					value: '1',
					label: '本日'
				},
				{
					value: '2',
					label: '本周'
				},
				{
					value: '3',
					label: '本月'
				},
			],
			typeList:[//交易类型列表
				{
					value: '',
					label: '所有交易类型'
				},
				{
					value: '1',
					label: '支付任务'
				},
				{
					value: '2',
					label: '充值'
				},
				{
					value: '3',
					label: '提现'
				},
				{
					value: '4',
					label: '提现失败'
				},
				{
					value: '5',
					label: '购买店铺名额'
				},
				{
					value: '6',
					label: '升级会员'
				},
				{
					value: '7',
					label: '推广'
				},
				{
					value: '8',
					label: '扣除担保金额'
				},
			],
			//--------交易列表-------------
			flowList: [
				{
					typeName: '充值',//交易类型
					task_id: 'df564845234',//交易号
					timestamp: 1514779200000,//创建时间
					remark: '100元',//名称备注
					money: '100',//金额
					status: '1',//状态
				}
			],
			withList:[],//提现列表
			dateType:'',//提现时间类型
		}
	},
	methods:{
		//获取已绑定银行卡列表
		bankCardList:function(){
			var _this = this;
			_this.$axios.post('/agent/wallet/showBankCard',).then(function(res){
//			    console.log(res.data.result);
			    var result = res.data.result;
			    _this.cardList = [];
			    for(var i = 0;i<result.length;i++){
			    	var item = {
			    		id: result[i].id,
			    		cardNum: _this.encryptionCard(result[i].cardNum) + '(' + result[i].bankName + ')'
			    	}
			    	_this.cardList.push(item);
			    }
			}).catch(function (error) {
			    console.log(error);
			});	
		},		
		//--------银行卡转账----------
		bankSub:function(){
			var _this = this;
			_this.$loading.show();
			if(_this.withdrawalForm.bankId==""){
				_this.$loading.hide();
				_this.$alert('2','银行卡不能为空');
			}else if(_this.withdrawalForm.money==""){
				_this.$loading.hide();
				_this.$alert('2','提现金额不能为空')
			}else if(_this.withdrawalForm.password==""){
				_this.$loading.hide();
				_this.$alert('2','登陆密码不能为空');
			}else if(_this.withdrawalForm.money<1){
				_this.$loading.hide();
				_this.$alert('2','提现金额不能低于1元');			
			}else if(_this.balance<_this.withdrawalForm.money){
				_this.$loading.hide();
				_this.$alert('2','提现金额不能高于可用余额');	
			}else{
				var postData = _this.$qs.stringify(_this.withdrawalForm);
				_this.$axios.post('/agent/wallet/withdrawals',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.$loading.hide();
					_this.$alert('1',data.result,function(){
						_this.showWallet();
						_this.recharge_2 = 3;
					})
				}else{
					_this.$loading.hide();
					_this.$alert('2',data.result);
				}
			}).catch(function(error){
				console.log(error);
			});
			}
		},
		showWallet:function(){
			var _this  = this;
			_this.$axios.post('/agent/wallet/show').then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					data = data.result;
					_this.balance = data.balance;
					_this.freeze = data.guaranteeBalance;
					_this.spread = data.allExtendsMoney;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function(error){
				console.log(error);
			});
		},
		showFlow:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
				startPage:_this.currentPage,
				pageSize:_this.pageSize,
				type:_this.searchType,
				dateType:_this.searchDateType,
				remark:_this.searchRemark,
			});
			_this.$axios.post('/agent/walletFlow/show',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.flowList = data.result.list;
					_this.total = data.result.total;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function(error){
				console.log(error);
			});
		},
		showWithList:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
				startPage:_this.currentPage,
				pageSize:_this.pageSize,
				dateType:_this.dateType,
			});
			_this.$axios.post('/agent/wallet/withdrawalsList',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.withList = data.result.list;
					_this.total = data.result.total;
				}else{
					_this.$alert('2',data.result);
				}
			}).catch(function(error){
				console.log(error);
			});
		},
		getStatus: function (obj){
			if(obj==0){
				return "审核中";
			}else if(obj==1){
				return "提现成功";
			}else if(obj==-1){
				return "提现失败";
			}
		},
		search:function(){
			this.currentPage=1;
			this.showFlow();
		},
		getPayNum:function(obj){
			if(obj.type==2){
				if(obj.wechatPay!=null){
					return obj.wechatPay;
				}else if(obj.bankPay!=null){
					return obj.bankPay;
				}else if(obj.aliPay!=null){
					return obj.aliPay;
				}
			}else{
				return "";
			}
		},
		//----------银行卡号前12位加密----------
		encryptionCard:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i>=12){
					str2 += str1[i];
				}else{
					str2 += '*';
				}
			})
			return str2;
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value,type){
			if(type==1 || type==3 || type==5 || type==6 || type==8){
				value = -value;
			}
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	    	this.currentPage=val;
	    	this.showFlow();
	    },
	},
	created:function(){
		if(this.$route.query.type){
			this.recharge_2 = this.$route.query.type;
		}
		this.bankCardList();
		this.showWallet();
		
		/**
		 * 开放提现后下面两个要删掉
		 */
		this.recharge_2=2;
		this.showFlow();
	},
	watch:{
		recharge_2(){
			if(this.recharge_2==2){
				this.currentPage=1;
				this.showFlow();
			}else if(this.recharge_2==3){
				this.currentPage=1;
				this.showWithList();
			}
		},
		dateType(){
			this.currentPage=1;
			this.showWithList();
		},
		searchDateType(){
			this.currentPage=1;
			this.showFlow();
		},
		searchType(){
			this.currentPage=1;
			this.showFlow();
		},
	}
}
</script>
<style>
/*-----------分页器样式------------*/
#withdrawal .el-pagination{
	text-align: center!important;
	margin-top: 20px!important;
}
#withdrawal .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E!important;
}
#withdrawal .el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E!important;
}
</style>
<style>
/*-----下拉框样式修改--------*/
#withdrawal .el-input__inner{
	height: 30px!important;
	line-height: 30px!important;
	border: 1px solid #E6E6E6!important;
	border-radius: 0!important;
}
#withdrawal .el-input__icon{
	height: auto!important;
	line-height: 30px!important;
}
#withdrawal .el-select-dropdown__item.selected{
	color: #FF464E!important;
}
#withdrawal .el-select .el-input.is-focus .el-input__inner{
	border-color: #e6e6e6!important;
}
#withdrawal .el-select .el-input__inner:focus{
	border-color: #e6e6e6!important;
}
#withdrawal .el-input__inner>i{
	opacity: 0!important;
}
.el-select-dropdown__item.selected{
	color: #FF464E!important;
}
</style>

<style scoped>
#withdrawal{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*-------资金明细--------*/
.recharge_1{
	display: flex;
	align-items: center;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	padding: 20px 30px;
	box-sizing: border-box;
	margin-top: 15px;
}
.recharge_1 img{
	height: 50px;
	display: block;
	margin-right: 10px;
}
.recharge_1 .recharge_1_text{
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.recharge_1_title{
	font-size: 16px;
	color: #545454;
}
.recharge_1_content{
	display: flex;
}
.recharge_1_content p{
	margin-right: 30px;
	color: #545454;
}
.recharge_1_content p span{
	color: #FF464E;
}
/*--------提现/账户明细-------*/
.recharge_2{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	margin-top: 5px;
}
.recharge_2 li{
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: -1px;
}
.recharge_2 span{
	color: #E6E6E6;
}
.recharge_2 li.recharge_2_active{
	border-bottom: 1px solid #FF464E;
	color: #FF464E;
}
/*---------提现------------*/
.recharge_3{
	padding: 20px;
	box-sizing: border-box;
}
.withdrawal_item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.withdrawal_item .balance{
	color: #FF464E;
	font-size: 16px;
	white-space: nowrap;
}
.withdrawal_item>p{
	width: 100px;
}
.withdrawal_item input{
	height: 30px;
	width: 217px;
	padding-left: 10px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
}
.withdrawal_item div{
	display: flex;
	align-items: center;
}
.withdrawal_item div span{
	margin-left: 5px;
}
.withdrawal_item div p{
	color: #FF464E;
}
#sub{
	background-color: #FF464E;
	color: #FFFFFF;
	width: 120px;
	height: 30px;
	border: none;
	box-sizing: border-box;
	margin-left: 100px;
}
/*-----温馨提示----------*/
.warm_prompt{
	background-color: #F5F5F5;
	color: #545454;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 222px;
}
.warm_prompt div{
	display: flex;
	align-items: center;
}
.warm_prompt div img{
	height: 15px;
	display: block;
	margin-right: 5px;
}
.warm_prompt div p{
	font-size: 16px;
}
.warm_prompt ul li{
	margin-top: 10px;
}
.warm_prompt ul li span{
	color: #FF464E;
}
/*-----------充值记录---------------*/
.search{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
/*-------下拉框样式---------*/
#search{
	display: flex;
	justify-content: flex-end;
}
#search .el-select{
	margin-right: 0;
}
.search .el-select{
	width: 150px;
	margin-right: 15px;
}
.search>input[type='text']{
	width: 200px;
	height: 30px;
	border: 1px solid #E6E6E6;
	padding-left: 10px;
	box-sizing: border-box;
	margin-right: 15px;
}
.search>input[type='button']{
	width: 120px;
	height: 30px;
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
}
/*--------日期插件样式修改-----------*/
.el-input__inner{
	height: 30px;
	line-height: 30px;
	padding: 0;
	border-radius: 0;
	width: 280px;
}
input.el-range-input{
	border: 1px solid #E6E6E6;
}
/*-------记录列表------------*/
.list_title{
	display: flex;
	background-color: #F5F5F5;
	height: 36px;
	align-items: center;
	margin-top: 20px;
}
.list_title p{
	width: 25%;
	text-align: center;
	color: #545454;
}
.list_title p:nth-child(1){
	width: 15%;
}
.list_title p:nth-child(2){
	width: 25%;
}
.list_title p:nth-child(3){
	width: 40%;
}
.list_title p:nth-child(4){
	width: 20%;
}
.list_item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
	height: 40px;
}
.list_item p{
	width: 25%;
	color: #808080;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_item p:nth-child(1){
	width: 15%;
}
.list_item p:nth-child(2){
	width: 25%;
}
.list_item p:nth-child(3){
	width: 40%;
}
.list_item p:nth-child(4){
	width: 20%;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
</style>
